<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性和侦听器</title>
  <script type="text/javascript" src="../../lib/vue/2.6.14/vue.min.js"></script>
  <script type="text/javascript" src="../../lib/axios/0.21.1/axios.min.js"></script>
  <script type="text/javascript" src="../../lib/lodash/4.17.21/lodash.min.js"></script>
</head>
<body>
  <!-- 计算属性 -->
  <h1>计算属性</h1>
  <div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Reversed message: "{{ reversedMessageMethod() }}"</p>
  </div>
  <!-- 监听属性 -->
  <h1>监听属性</h1>
  <div id="demo">{{ fullName }}</div>
  <!-- 计算属性的 setter -->
  <h1>计算属性的 setter</h1>
  <div id="computedSetDemo">
    <div>{{firstName}}</div>
    <div>{{lastName}}</div>
    <div>{{fullName}}</div>
  </div>

  <!-- 侦听器 -->
  <h1>侦听器</h1>
  <div id="watch-example">
    <p>
      Ask a yes/no question:
      <input v-model="question">
    </p>
    <p>{{ answer }}</p>
  </div>

<script>
  var example = new Vue({
    el: '#example',
    data: {
      message: 'Hello'
    },
    // 计算属性
    computed: {
      // 计算属性的 getter
      reversedMessage: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
      }
    },
    // 方法区
    methods: {
      reversedMessageMethod: function () {
        return this.message.split('').reverse().join('')
      }
    }
  })

  var demo = new Vue({
    el: '#demo',
    data: {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    },
    // 监听属性
    watch: {
      firstName: function (val) {
        this.fullName = val + ' ' + this.lastName
      },
      lastName: function (val) {
        this.fullName = this.firstName + ' ' + val
      }
    }
  })

  var computedSetDemo = new Vue({
    el: '#computedSetDemo',
    data: {
      firstName: 'Foo',
      lastName: 'Bar',
    },
    computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }
  })

  /**
   * 初始化完成以后创建debouncedGetAnswer方法，监听question输入框，当停止输入500毫秒以后，执行getAnswer方法
   */
  var watchExampleVM = new Vue({
    el: '#watch-example',
    data: {
      question: '',
      answer: '在您提出问题之前，我无法给您答案！'
    },
    watch: {
      // 如果 `question` 发生改变，这个函数就会运行
      question: function (newQuestion, oldQuestion) {
        this.answer = '等你停止打字...'
        this.debouncedGetAnswer()
      }
    },
    created: function () {
      // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
      // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率, AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
      // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，请参考：https://lodash.com/docs#debounce
      this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
    },
    methods: {
      getAnswer: function () {
        if (this.question.indexOf('?') === -1) {
          this.answer = '问题通常包含一个问号。 ;-)'
          return
        }
        this.answer = '思维...'
        var vm = this
        axios.get('https://yesno.wtf/api')
                .then(function (response) {
                  vm.answer = _.capitalize(response.data.answer)
                }).catch(function (error) {
                  vm.answer = '错误！无法访问 API。' + error
                })
      }
    }
  })
</script>
</body>
</html>